<template>
  <div style="border: 1px solid #ffffff;width:100%;">
    <el-row >
      <el-col :span="20">
        <div  class="out">
          <div style="border: 1px solid #ffffff;height: 41px;margin: 10px 0 10px 0; ">
            <el-col :span="5" >
              <el-input   clearable  v-model="orderName" placeholder="商机名称/客户名称" suffix-icon="el-icon-search" style="width: 180px;margin :0 10px 10px 10px">
              </el-input>
            </el-col>
            <el-col :span="9">
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-col>
            <el-col :span="10">
              <el-button style="margin: 4px 1px 1px -34px " size="small" type="primary" icon="el-icon-search" @click="searchInfo">搜索</el-button>
            </el-col>
          </div>
          <div class="div_sty"></div>


          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin: 0 0 0 14px;min-height: 465px">
            <el-tab-pane label="待发货订单" name="first" type="card" >
              <div class="table_sty">
              <el-table
                :data="invoiceInfo.slice((currentPage2-1)*pageSize2,currentPage2*pageSize2)"
                stripe
                border
                style="width: 100%;margin-bottom: 5px">
                <el-table-column
                  prop="orderName"
                  label="订单号"
                  width="140">
                </el-table-column>
                <el-table-column
                  prop="orderTheme"
                  label="订单主题"
                  width="195">
                </el-table-column>
                <el-table-column
                  prop="deliveryTime"
                  label="预计完成时间"
                  width="140">
                </el-table-column>
                <el-table-column
                  prop="customerByCustomId.cusName"
                  label="最大交付期次"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="empId.empName"
                  label="负责人"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="操作"
                  width="200">
                  <template slot-scope="scope" >
                    <i class="el-icon-d-arrow-right" style="hoaver:background-color：red ;cursor: pointer" @click="deliveryInfo(scope.row)"></i>
                  </template>
                </el-table-column>
              </el-table>
                <el-pagination style="float:right;margin-top: 5px;" :current-page.sync="currentPage2" :page-sizes="[10, 25, 40,100]"
                               :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper"
                               :total="invoiceInfo.length"
                               @current-change="changeProSize"
                               @size-change="handleSizeChange2">
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="订单交付管理" name="second">
              <div class="second_sty">
                <el-timeline>
                  <el-timeline-item  v-for="(items,index) in detaailsInfo" :key="items.deliveryId" :timestamp="items.deData | formatDate"  placement="top" style="width: 70%">
                    <el-card>
                      <el-row>
                        <el-col :span="22">
                          <h4>{{items.deThere}}/{{items.deNote}} <span></span></h4>
                        </el-col>
                        <el-col :span="2">
                          <span v-if="items.deFhuostate==0">
                                <el-button style="margin:1px 1px 1px 1px" type="info" slot="reference" icon="el-icon-right" circle @click="detaailsOk(items.deAmount,items.deliveryId)"></el-button>
                              </span>
                          <span v-if="items.deFhuostate==1">
                             <el-button style="margin:1px 1px 1px 1px" type="success" icon="el-icon-check" circle></el-button>
                           </span>
                        </el-col>
                      </el-row>
                      <el-table
                        :data="items.invoiceDetailsVos"
                        stripe
                        style="width: 100%">
                        <el-table-column
                          prop="productName"
                          label="产品名称"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="prModel"
                          label="产品型号"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="detaNumber"
                          label="订单数量">
                        </el-table-column>
                        <el-table-column
                          prop="detaPrice"
                          label="售价">
                        </el-table-column>
                        <el-table-column
                          prop="psNumber"
                          label="库存数量">
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>

      <el-col :span="4">
        <div  class="right_sty">
          <el-row>
            <el-col :span="24">
              <h4 style="margin: 20px 20px 20px 20px">今日发货单</h4>
              <div class="div_sty"></div>
              <div class="second_sty">
                <el-row>
                  <el-col :span="22" :offset="1" v-for="(cons, index) in toDayInfo" style="margin-top: 10px;margin-bottom: 10px;cursor: pointer" :key="index">
                    <el-card  shadow="hover" :body-style="{ padding: '4px'}" :class="{'active' : index === rightIndex}" >
                      <div>
                        <div style="padding: 14px;"   @click="cardevent(cons,index)">
                          <el-row>
                            <el-col :span="12">
                              <span style="color: #20a0ff">{{cons.kauidGs}}</span>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col >{{cons.kauidHao}}</el-col>
                          </el-row>
                          <el-row>
                            <el-col >￥{{cons.samoUnt}}</el-col>
                          </el-row>
                          <div style="border: 1px solid #42b983 ;width: 95%;margin-top: 10px;margin-bottom: 5px"></div>
                          <el-row>
                            <el-col :span="24"><span>{{cons.shipmentsTime |formatDate }} </span></el-col>
                          </el-row>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>

      <div>
        <el-dialog title="发货单" :visible.sync="infoState">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="客户">
              <el-input v-model="customName"></el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="发货单号">
                  <el-input v-model="form.fhuodan"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发货金额">
                  <el-input v-model="amount"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="快递公司">
                  <el-input v-model="form.kauidgs"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="快递单号">
                  <el-input v-model="form.kauidhao"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="收货人">
                  <el-input v-model="consigneeList.consigneeName+separator+consigneeList.rcPhone"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="收货地址">
                  <el-input v-model="consigneeList.rcAddressProvince+separator+consigneeList.rcAddressCity+separator+
                                    consigneeList.rcAddressArea+separator+consigneeList.rcAddressDetailed"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="负责人">
                  <el-input v-model="fzrName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">立即创建</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
      </div>

    </el-row>
  </div>
</template>


<script>

    import {formatTimeToStr} from '@/assets/format'
    export default {
        name: "SaDeliverGoods",

      data() {
        return {
          rightIndex:0,
          pageSize2:10,
          currentPage2:0,
          infoState:false,
          zorderId:0,
          zdeliveryId:0,
          customName:'',
          separator:'/',
          consigneeList:{},
          consigneeId:0,
          orderId:0,
          fzrName:'',
          amount:0,
            form:{
              customeId:'',
              fhuodan:'',
              fhuoDate:'',
              date1:'',
              kauidgs:'',
              kauidhao:'',
              shouhdz:'',
              fzr:'',
            },
            gridData:[],
            detaailsInfo:[],
            orderName:'',
            invoiceInfo:[],//表数据
            toDayInfo:[],
          //控制表格界面
          message: 'first',
          activeName: 'first',
          pickerOptions: {
            shortcuts: [{
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
              }
            }]
          },
          value2: '',
          stotalSize:0,
          spageSize:0,
          scurrentPage:1,
          userInfo:{
            employeesId:0,//员工id
            empName:''//员工名称
          },
        }
      },
      created() {
        this.userInfo=JSON.parse(sessionStorage.getItem('user'));
        this.fzrName=this.userInfo.empName;
        this.form.fzr=this.userInfo.employeesId;
         this.initDate(this.orderName,this.value2);
         this.$axios.get("http://localhost:8088/zfhuodan_list").then(v=>{
           this.toDayInfo=v.data;
         }).catch()
      },
      methods:{
        zfhuodanName(){
          this.$axios.get("http://localhost:8088/zfhuodan_name").then(v=>{
            this.form.fhuodan=v.data;
            }
          ).catch()
        },
        //待修改
        cardevent(cons,index){
          this.rightIndex = index;
          this.$router.push({path:'demopage', query: {key:cons.orderId}})
        },
        searchInfo(){
          var str='';
          if(this.value2 != null){
            str = this.value2[0]+','+this.value2[1];
            if(this.value2[0]==undefined){
              str='';
            }
          }
            this.initDate(this.orderName,str);

        },
        //前端分页
        changeProSize: function (size) {
          this.currentPage2 = size;
          console.log("yy"+this.pageSize)  //每页下拉显示数据
        },
        handleSizeChange2: function(currentPage){
          this.pageSize2 = currentPage;
          console.log("kk"+this.pageNum)  //点击第几页
        },
        onSubmit(){
          this.$axios.get("http://localhost:8088/fanhuoOk_save",{params:{customeId:this.form.customeId,
              fhuodan:this.form.fhuodan,
              kauidgs:this.form.kauidgs,
              kauidhao:this.form.kauidhao,
              shouhdz:this.form.shouhdz,
              fzr:this.form.fzr,
              amount:this.amount,
              orderId:this.orderId,
              deliveryId:this.zdeliveryId}}).then(v=>{
                this.infoState=false;
                this.deliveryDetaails(this.orderId);
          }).catch();
        },

        //发货单按钮
        detaailsOk(deAmount,id){
          this.zfhuodanName();
          this.infoState=true;
          this.zorderId=this.orderId;
          this.zdeliveryId=id;
          this.$message("xtp"+this.orderId+"交付id"+id);
          this.amount=deAmount;
          this.$axios.get("http://localhost:8088/receiving_list",{params:{ctId:this.consigneeId}}).then(v=>{
            this.consigneeList=v.data;
          }).catch()
        },
        firstCard(){
          this.detaailsInfo=[];
        },
        //操作指定订单的发货单
        deliveryDetaails(id){
          this.$axios.get("http://localhost:8088/deliverydetails_list",{params:{orderId:id}}).then(v=>{
            this.detaailsInfo=v.data;
          }).catch()
        },
        //操作按钮
        deliveryInfo(row){
          this.deliveryDetaails(row.orderId);
            this.form.customeId=row.customerByCustomId.customId;
            this.orderId=row.orderId;
            this.consigneeId=row.consigneeId;
            this.form.shouhdz=row.consigneeId;
            this.customName=row.customerByCustomId.cusName;
            this.activeName='second';
        },
          initDate(value,timeValue){
            this.$axios.get("http://localhost:8088/invoiceInfo_list",
              {params:{name:value,timeValue:timeValue}}).then(v=>{
                this.invoiceInfo=v.data;
            }).catch()
          },
        handleClick(tab, event) {
          this.firstCard();
        },
        //改变页大小
        changePage(page){
          this.initDate(page,this.spageSize,this.bsName,this.speedId);
        },
        handleSizeChange(val){
          this.initDate(1,val,this.bsName,this.speedId);
        },
      },
      filters: {// 日期格式化
        formatDate: function (time) {
          if (time != null && time != '') {
            var date = new Date(time)
            return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
          } else {
            return ''
          }
        }
      },

    }
</script>

<style scoped>
  .active{
    border: 2px solid #20a0ff;

  }
  .div_sty{
    border: 1px solid #20a0ff;
    width: 98%;
    margin: 0 auto
  }
  .second_sty{
    min-height: 414px;
    max-height: 414px;
    overflow-y: auto;
  }
  .right_sty{
    border:1px solid #ffffff ;
    border-radius: 4px;
    width:100%;
    border:1px solid #BFBFBF;
    background-color: white;
    box-shadow:#ccc 0px 0px 10px;
    max-height: 530px;
    min-height: 530px;
  }

  .out,.in{
    border:1px solid #ffffff ;
    border-radius: 4px;
    border:1px solid #BFBFBF;
    background-color: white;
    width:99%;

  }
  .out{
    box-shadow:#ccc 0px 0px 10px;

  }

  .table_sty{
    overflow-y: auto;
    overflow-x: auto;
    max-height: 408px;
    mix-height:408px;
  }

  ::-webkit-scrollbar {

    width: 6px; /*对垂直流动条有效*/

    height: 6px; /*对水平流动条有效*/

  }

  /*定义滚动条的轨道颜色、内阴影及圆角*/

  ::-webkit-scrollbar-track{

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);

    background:linear-gradient(to top, #fcf5ee, #faf7e6,#73d2f3,#eeeeee);

    border-radius: 1px;

    display:none;

  }

  /*定义滑块颜色、内阴影及圆角*/

  ::-webkit-scrollbar-thumb{

    border-radius: 5px;

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);

    background:linear-gradient(to top, #BBFFFF, #96CDCD,#98F5FF,#7AC5CD);

  }

  /*定义两端按钮的样式*/

  ::-webkit-scrollbar-button {

    background-color:#ffffff;

  }

  /*定义右下角汇合处的样式*/

  ::-webkit-scrollbar-corner {

    background:#ffffff;

  }

  ::-webkit-scrollbar-track-piece {

    background-color: #ffffff;

  }
</style>
